<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100vh;
        }

        span {
            position: fixed;
            user-select: none;
            transition: all 1s;
        }
    </style>
</head>
<body>
    
</body>
<script>
    let text = ['富强','民主','文明','和谐','自由','平等','公正','法治','爱国','敬业','诚信','友善'], 
        index = 0;

    $("body").onclick = function(e) {
        // let x = e.x, y = e.y;
        let { x,y } = e;
        let span = document.createElement("span");
        span.innerText = text[index]

        span.style = `
          left: ${x}px;
          top: ${y}px;
          color: hsl(${Math.random() * 360}, 100%, 50%);
        `;
        // span.style.position = `fixed`;
        // span.style.left = `${x}px`;
        // span.style.top = `${y}px`;

        $("body").appendChild(span);

        motion(span ,y)

        index+=1;
        if (index > 11) {
            index = 0
        }
    }

    function motion(el, top) {
       setTimeout(function() {
         el.style.top = `${top - 200}px`;
       }, 300)
       setTimeout(function() {
         $("body").removeChild(el);
       }, 1300)
    }


    function $(className) {
        return document.querySelector(className);
    }

    function _(className) {
        return document.querySelectorAll(className);
    }

</script>
</html>